<template>
  <a-card :bordered="false">
    <!-- 顶部统计卡片 -->
    <a-row :gutter="16" class="stats-row">
      <a-col :span="8">
        <a-card>
          <a-statistic title="楼宇总数" :value="buildingStats.buildingTotal">
          </a-statistic>
          <div class="stats-footer">
            <span>今日新增: {{ buildingStats.buildingDayTotal || 0 }}</span>
          </div>
        </a-card>
      </a-col>

      <a-col :span="8">
        <a-card>
          <a-statistic title="楼层总数" :value="buildingStats.floorTotal">
          </a-statistic>
          <div class="stats-footer">
            <span> 今日新增: {{ buildingStats.floorDayTotal }} </span>
          </div>
        </a-card>
      </a-col>

      <a-col :span="8">
        <a-card>
          <a-statistic title="房间总数" :value="buildingStats.roomTotal">
          </a-statistic>
          <div class="stats-footer">
            <span> 今日新增: {{ buildingStats.roomDayTotal }} </span>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery"> </a-form>
      <div class="table-operator">
        <a-button
          @click="$refs.modalEdit.add()"
          type="primary"
          icon="plus"
          size="small"
          v-wx-role="30301"
          >添加</a-button
        >
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item>
              <a-popconfirm
                title="确定删除吗?"
                @confirm="() => handleDelete()"
                v-wx-role="30304"
              >
                <a><a-icon type="delete" />删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"
            >批量操作<a-icon type="down"
          /></a-button>
        </a-dropdown>
      </div>
      <s-table
        ref="table"
        rowKey="id"
        size="middle"
        :scroll="{ x: 500 }"
        :columns="columns"
        :alert="options.alert"
        :row-selection="options.rowSelection"
        :data="loadData"
      >
        <template slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)" v-wx-role="30302">
            <a-icon type="edit" />编辑</a
          >
          <a-divider type="vertical" />
          <a @click="handleGl(record)" v-wx-role="30302">
            <a-icon />进入管理</a
          >
          <a-divider type="vertical" />
          <a @click="handelView(record)" v-wx-role="30304"><a-icon /> 查看</a>
          <a-divider type="vertical" />
          <a-popconfirm
            title="确定删除吗?"
            @confirm="() => handleDelete(record.id)"
            v-wx-role="30303"
          >
            <a>删除</a>
          </a-popconfirm>
        </template>
      </s-table>

      <dev-campus-area-edit
        ref="modalEdit"
        @ok="modalEditOk"
      ></dev-campus-area-edit>
      <dev-campus-area-view ref="modalView"></dev-campus-area-view>
      <dev-campus-gl ref="modalGl"></dev-campus-gl>
    </div>
  </a-card>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { deleteAction, getAction, postAction } from '@/api/manage'
import { mixin } from '@/utils/mixin'
import DevCampusAreaEdit from './DevCampusAreaEdit'
import DevCampusAreaView from './DevCampusAreaView'
import DevCampusGl from './DevCampusGl'

export default {
  name: 'DevCampusAreaList',
  mixins: [mixin],
  components: {
    STable,
    Ellipsis,
    DevCampusAreaEdit,
    DevCampusAreaView,
    DevCampusGl,
  },
  data() {
    return {
      // 新增统计数据
      buildingStats: {
        buildingTotal: 0,
        floorTotal: 0,
        roomTotal: 0,
        buildingDayTotal: 0,
        floorDayTotal: 0,
        roomDayTotal: 0,
      },

      visible: false,
      // 查询条件
      queryParam: {
        title: '',
      },
      // 表头
      // 如果需要字典，那么需要在columns列中加入 customRender: (text) => this.$sysDictFilter(text, 'xxxx')xxxx 为dataIndex
      columns: [
        {
          title: '区域名称',
          dataIndex: 'campusName',
        },
        {
          title: '使用面积',
          dataIndex: 'usableArea',
        },
        {
          title: '所在位置',
          dataIndex: 'campusAddress',
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        console.log('loadData.parameter', parameter)
        return postAction(
          this.url.list,
          Object.assign(parameter, this.queryParam)
        ).then((res) => {
          return res.result
        })
      },
      selectedRowKeys: [],
      options: {
        alert: {
          clear: () => {
            this.selectedRowKeys = []
          },
        },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange,
          type: 'checkbox',
        },
      },
      url: {
        list: '/system/devCampusArea/list',
        delete: '/system/devCampusArea/delete',
        getStats: '/system/devCampusBuildingFloorRoom/getStats',
      },
    }
  },
  computed: {},
  created() {
    this.getStats()
  },
  methods: {
    getStats() {
      getAction(this.url.getStats).then((res) => {
        this.buildingStats = res.result.data
      })
    },
    // 删除
    handleDelete(record) {
      if (!record) {
        // 如果没有传入，那么批量删除
        record = this.selectedRowKeys.join(',')
      }
      deleteAction(this.url.delete, { ids: record }).then((resp) => {
        this.$message.success('删除成功!')
        this.$refs.table.refresh(true)
      })
    },
    //进入管理
    handleGl(record) {
      this.$nextTick(() => {
        this.$refs.modalGl.view(record)
      })
    },
    // 用户编辑
    handleEdit(record) {
      this.$refs.modalEdit.edit(record)
    },
    searchQuery() {
      this.$refs.table.refresh(true)
      this.getStats()
    },
    // 保存刷新
    modalEditOk() {
      this.$refs.table.refresh()
      this.getStats()
    },
    // 查看
    handelView(record) {
      this.$refs.modalView.show(record)
    },
    //开启选择
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
  },
  watch: {},
}
</script>
<style scoped>
.stats-footer {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}

.list-row {
  margin-top: 16px;
}
</style>
